<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>jqGrid demo</title>
    <link type="text/css" rel="stylesheet" href="static/jquery-ui-1.11.1/jquery-ui.min.css"/>
    <link type="text/css" rel="stylesheet" href="static/jquery.jqGrid-4.4.3/css/ui.jqgrid.css"/>
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="static/jquery-ui-1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/jquery.jqGrid.min.js"></script>
    <!--<script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/i18n/grid.locale-en.js"></script>-->
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript">
        $(function () {
            loadJqGrid();
        });

        function loadJqGrid() {
            $("#grid").jqGrid({
                caption: "jqGrid demo",
                url: "/resultSet",
                datatype: "json",
                postData: {},
                prmNames: {
                },
                colNames: ["id", "name", "phone", "email"],
                colModel: [
                    {name: "id", width: 40, align: "center"},
                    {name: "name", align: "center"},
                    {name: "phone", align: "center"},
                    {name: "email", align: "center"}
                ],
                loadtext: "loading person informations",
                rowNum: 10,
                pager: "#pager",
                viewrecords: true,
                autowidth: true,
                height: '100%',
                jsonReader: {
                    root: "results",
                    page: "currentPage",
                    total: "pages",
                    records: "total",
                    repeatitems: false
                },
                ondblClickRow: function (rowId, iRow, iCol, event) {
                    alert(rowId);
                }
            });
            $("#grid").trigger('reloadGrid');
        }
    </script>
</head>
<body>
<h1>jqGrid demo</h1>

<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>
</body>
</html>